<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
  <title>转一转</title>
  <!--标准mui.css-->
  <link rel="stylesheet" href="../../../css/mui.min.css">
  <script src="../../../js/mui.min.js"></script>
  <!--App自定义的css-->
  <link rel="stylesheet" type="text/css" href="../../../css/app.css" />
  <link rel="stylesheet" href="../../../npl/css/vant.mini.css" />
  <script src="../../../js/vue.js"></script>
  <script src="../../cellBtns/index.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" href="../../cellBtns/css.css">
  <script src="../../../js/jquery-3.6.0.min.js"></script>
  <script src="../../../js/vconsole.min.js"></script>
  <script src="../../../js/sm2.js"></script>
  <script src="../../../js/sm3.js"></script>
  <script src="../../../js/clipboard.js"></script>
  <script src="../../../js/flexible.js"></script>
  <script src="../../../npl/js/vant.mini.js"></script>
  <script src="../../../js/elementui.js"></script>
  <link rel="stylesheet" href="../../../css/elementui.css">
  <script src="../../text.js" type="text/javascript"></script>
  

  <link rel="stylesheet" href="../css/chooseDir.css" />
  <script src="../js/util.js" type="text/javascript"></script>
  <script src="../js/stream.js"></script>
  <script src="../js/streamMsg.js"></script>
  <script src="../js/multiBtn.js"></script>
  <script src="../js/chooseDir.js"></script>
  <style>
    html, body, #app{
      background: none !important;
    }
    #app {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .trainTicketstitle {
      /* background-image: linear-gradient(to right, rgb(13, 121, 131), rgb(25, 179, 182)); */
      /* padding: 0rem 0.2rem; */
      color: #fff;
      height: 1rem;
      font-size: 0.35rem;
      z-index: 99999 !important;
    }

    .mui-btn-blue,
    .mui-btn-primary,
    input[type=submit] {
      background-color: rgb(25, 179, 182);
      color: #fff;
      border: 1px solid rgb(25, 179, 182);
      border-radius: 4px;
      margin-right: 10px;
    }

    .mui-toast-container {
      top: 50%;
    }

    ::-webkit-input-placeholder {
      color: black;
    }

    .mui-pull-left {
      color: #fff;
    }

    .left {
      text-align: center;
    }

    .left b {
      line-height: 0.5rem;
      color: #fff;
    }

    .left .left1 {
      position: absolute;
      left: 0.1rem;
      top: 0.25rem;
    }

    .left_title {
      line-height: 0.5rem;
      color: #fff;
      font-weight: 600;
    }

    .List {
      height: calc(100% - 3rem) !important;
      height: calc(100% - 3rem - constant(safe-area-inset-bottom));
      height: calc(100% - 3rem -env(safe-area-inset-bottom));
      border-radius: .2rem;
      padding: 0 10px;
      overflow-y: scroll;
    }

    #openFile {
      background: none !important;
      /* position: absolute; */
      font-weight: 500;
      color: #5f84f7;
      font-size: 11px;
      /* width: 20%; */
      height: 100%;
      top: 0;
      right: 0rem;
      padding: 0;
      border: none;
    }

    .uplode {
      width: 100%;
      padding: 0 20px;
    }

    .uplode_img {
      width: 1rem;
      float: right;
      height: 1rem;
    }

    /* #form-user{
            width: 100%;
            float: right;
            height: 100%;
        } */
    .form-user {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .uplode_img img {
      width: 100%;
      height: 100%;
    }

    .wrpper {
      /* width: 34px; */
      height: 64px;
      display: flex;
      justify-content: space-between;
      position: relative;
      align-items: center;
    }

    .List_wrapper .List_access {
      /* width: 1.5rem; */
      height: 16px;
      margin-left: 3px;
      line-height: 16px;
      background-color: rgba(95, 132, 247, 0.08);
      border-radius: 18px;
      font-family: PingFang SC;
      color: #2d343c;
      font-size: 10px;
      padding: 0 5px;
      /* border-right: 1px solid #ccc; */
      color: rgb(199, 197, 197);
      /* left: 55%;
    top: -2% */
      float: left;
    }

    .List_wrapper .List_time {
      height: 16px;
      line-height: 16px;
      background-color: rgba(95, 132, 247, 0.08);
      border-radius: 18px;
      font-family: PingFang SC;
      color: #2d343c;
      font-size: 10px;
      padding: 0 5px;
      /* position: absolute; */
      float: left;
      display: flex;
      align-items: center;
      justify-content: space-between;
      /* border-right: 1px solid #ccc; */
      color: rgb(199, 197, 197);
      font-size: 13px;
      left: 0%;
      top: 0%
    }

    .List_wrapper {
      height: 16px;
      width: 200px;
      line-height: 16px;
      position: absolute;
      left: 13%;
      top: 58%
    }

    .List_wrapper1 {
      height: 16px;
      width: 85%;
      line-height: 16px;
      position: absolute;
      left: 17%;
      top: 48%
    }

    .List_img img {
      width: 100%;
      height: 100%;
    }

    .List_img {
      width: .7rem;
      height: .7rem;
      margin-right: 15px;
    }


    .van-cell {
      padding: 0 10px !important;
      background: none !important;
    }

    #multipartFile1 {
      width: 100%;
      height: 100%;
      position: absolute;
      opacity: 0;
      left: 0;
      top: 0;
      z-index: 999;
    }

    .form_btn {
      width: 100%;
      display: flex;
      padding: 0 5%;
      justify-content: space-between;
    }

    .form_btn .qx {
      width: 47%;
      background-color: rgba(45, 52, 60, 0.08);
      border-radius: 48px;
      font-family: PingFang SC;
      color: rgba(45, 52, 60, 0.8);
    }

    .form_btn .tj {
      width: 47%;
      background-color: #5f84f7;
      color: #fff;
      border-radius: 48px;
    }

    .transition .van-popup--center {
      border-radius: 12px;
      width: 100%;
      padding: 20px 10px;
      display: flex;
      justify-content: space-around;
      flex-direction: column;
      height: 61%;
    }

    .van-cell {
      align-items: center;
      padding: 10px 2px 10px 5px;
      justify-content: space-between;
    }

    .popWrapper {
      width: 100%;
      height: 100%;
      justify-content: center;
      align-items: center;
      display: flex;
      flex-direction: column;
      padding: 0 24px;
    }

    .fileImg {
      width: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      /* padding: 24px 0 0 10px; */
    }

    .pop_title {
      font-family: PingFang SC;
      font-weight: bold;
      color: #2d343c;
      font-size: 16px;
    }

    .upload_img {
      width: 100%;
      background: url("../images/zyzbg.png") no-repeat;
      background-size: 100% 100%;
    }
    .upload_img2{
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 4rem;
      background-color: #FEFBF6;
      /* 添加虚线边框样式 */
      border: 0.03rem dashed #CAAB8E; /* 2px是边框宽度，#ccc是灰色，你可以调整这些值 */
      /* 四个角变成半椭圆形状 */
      border-radius: 0.3rem;  /* 调整这个值让角更圆（如 20px、30px） */
      gap: 0.3rem;    
    }
    .upload-prompt-image{
      width: 1.4rem;   /* 固定宽度 */
      height: auto; 
      margin: 0.8rem auto 0;
    }
    .prompt-text{
      font-size: 0.25rem;      /* 文字大小（14px） */
      color:#7e8389;              /* 文字颜色 */
      text-align: center; 
    }
    .prompt-text2{
      font-size: 0.25rem;      /* 文字大小（14px） */
      color: #bfbfbf;              /* 文字颜色 */
      text-align: center;
    }

    .form_wrapper {
      display: flex;
      width: 100%;
      height: 4rem;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }

    .form_img {
      /* width: 100%;
      height: 38%; */
      text-align: center;
      padding: 20px 60px;
      box-sizing: border-box;
    }

    .form_img img {
      width: 100%;
      height: 100%;
    }

    .form_text {
      font-weight: 500;
      margin-top: 4px;
      color: rgba(45, 52, 60, 0.6);
      font-size: 12px;
    }

    .flowPath {
      width: 100%;
      flex: 1;
    }

    .wrpper {
      /* width: 34px; */
      height: 64px;
      display: flex;
      justify-content: space-between;
      position: relative;
      align-items: center;
    }

    .List_img img {
      width: 100%;
      height: 100%;
    }

    .List_img {
      width: .7rem;
      height: .7rem;
      /* position: absolute; */
      /* left: 0;
    top: 6% */
    }

    .List_title1 {
      width: 70%;
      height: .5rem;
      line-height: .5rem;
      position: absolute;
      font-family: PingFang SC;
      font-weight: 500;
      color: #2d343c;
      font-size: 13px;
      left: 16%;
      top: 13%
    }

    .List_title {
      width: 70%;
      height: .5rem;
      line-height: .5rem;
      position: absolute;
      font-family: PingFang SC;
      font-weight: 500;
      color: #2d343c;
      font-size: 13px;
      left: 13%;
      top: 13%
    }

    .transition .van-overlay,
    .transition .van-popup {
      background: none !important;
    }

    .transition .van-overlay {
      z-index: 0 !important;
    }

    .numImg {
      display: flex;
      margin-top: 10px;
      color: #999;
      font-size: 12px;
      margin-left: 10px;
    }

    .text_title {
      /* height: 30px; */
      /* padding: 0% 0% 0% 4%; */
      position: relative;
      /* border-bottom: 1px solid #8a9dbe; */
      /* background:turquoise; */
      /* line-height: 30px;         */
    }

    .first_span {
      width: 3px;
      border-radius: 20% 20%;
      display: inline-block;
      height: 15px;
      background: #EA8332;
    }

    .first_span_text {
      font-weight: 500;
      font-size: 15px;
      color: #1e3754;
      /* position: absolute;
      left: 6%;
      top: 9%; */
    }

    .first_span_img {
      /* position: absolute;
        left: 25%;
        top: 36%; */
      margin-left: 3px;
      color: red;
    }
    .curtain {
      z-index: 9999 !important;
    }
    .transition {
      margin-top: 20px;
    }
    .huzhuan {
      height: 18px;
      width: 18px;
      background: url("../images/hz.png") no-repeat;
      background-size: 100% 100%;
      margin-top: 10px;
    }
    .van-popup--top {
      margin-top: 3px;
      left: 3.1rem;
      width: 1.9rem;
      border-radius: 10px;
      border: solid rgb(241, 172, 111);
      border-width: 2px;
      background-color: rgb(254, 250, 245) !important;
    }
    .van-cell {
      text-align: center !important;
    }
    .van-dropdown-menu__bar {
      background-color:rgb(254, 250, 245);
      font-weight: bolder;
      height: 0.8rem;
      border-radius: 10px;
      border: solid rgb(241, 172, 111);
      border-width: 2px;
    }

    .van-dropdown-menu__title::after {
      border-color: transparent transparent #000000 #000000;
    }
    .van-cell__value {
      display: none;
    }
    .van-dropdown-item {
      top: 6.9rem !important;
    }
    .van-dropdown-item__icon {
      display: none;
    }
    .typeClass {
      display: flex;
      height: 0.8rem;
      text-align: center;
      justify-content: center;
      border-radius: 10px; 
      border: none;
      align-items: center;
    }
    .def-bg {
      background-color: #ebebeb;
      color: #808080;
    }
    .uploaded-bg {
      background-color: rgb(254, 250, 245);
      border: solid rgb(241, 172, 111);
    }

    .transBtn {
      display: flex;
      height: 0.8rem;
      text-align: center;
      justify-content: center;
      border-radius: 10px; 
      border: none;
      align-items: center;
      color: white;
    }

    .active-btn {
      background-color: rgb(251, 147, 56);
      color: white;
    }

    .unactive-btn {
      background-color: #ebebeb;
      color: #808080;
    }

    .search-tip {
      margin-top: 0.2rem;
    }
    .tip-f {
        display: flex;
        height: 1.6rem;
        line-height: 0.4rem;
        margin: 0.3rem 0rem;
        background-color: #F6F7F9;
        padding: 0.2rem;
        border-radius: 8px;
        max-width: 100%;
    }
    .tip-close {
        width: 0.4rem;
        height: 0.4rem;
        position: absolute;
        top: 0.2rem;
        right: 0;
        background: url("../images/close.png") no-repeat;
        background-size: 100% 100%;
    }

    .chat-f-l {
        align-items: center;
        display: flex;
        height: 0.6rem;
    }
    .chat-f-l img{
        border: 0;
        height: 0.8rem;
        margin: auto;
    }
    .chat-f-r {
        margin-left: 0.15rem;
        /* width: 100%; */
    }
    .chat-f-r1 {
        font-weight: 600;
        font-size: 0.3rem;
    }
    .chat-f-r2 {
        color: #aaa;
        font-size: 0.25rem;
    }
    .zyzfx{
        width: 48px;
        height: 28px;
        position: absolute;
        right: 1.4rem;
        bottom: 0;
        background: url("../images/zyzfx.png") no-repeat;
        background-size: 100% 100%;
    }
    .zyzfs{
        width: 48px;
        height: 28px;
        position: absolute;
        right: 0.2rem;
        bottom: 0;
        background: url("../images/zyzfasong.png") no-repeat;
        background-size: 100% 100%;
    }
    .progress-bar {
      width: 100%;
    }
    .upload-srow {
      padding: 0rem 0.6rem;
      display: flex;
    }
    .upload-srow-r {
      width: calc(100% - 50px);
    }
    .upload-srow-r1 {
      white-space: nowrap;
      overflow: hidden;
      /* 防止文本溢出 */
      text-overflow: ellipsis;
      /* 当文本溢出时显示省略号 */
      line-height: 0.5rem;
    }
    .upload-bg { 
        width: 40px;
        height: 48px;
        background-size: 100% 100%;
        background-size: cover; /* 背景图片覆盖整个元素 */
        background-repeat: no-repeat; /* 背景图片不重复 */
        background-position: center; /* 背景图片居中 */
    }
    .pdf-bg {
      background-image: url("../images/pdf.png");
    }
    .word-bg {
      background-image: url("../images/word.png");
    }
    .excel-bg {
      background-image: url("../images/excel.png");
    }
    .ppt-bg {
      background-image: url("../images/ppt.png");
    }
    .ofd-bg {
      background-image: url("../images/ofd.png");
    }
    .pic-bg {
      background-image: url("../images/img.png");
    }

    .van-progress__pivot {
      display: none;
    }

    .form_wrapper_active {
      background-color: rgb(254, 250, 245);
    }
    .finishBg {
        width: 12px;
        height: 13px;
        background: url("../images/zyzfinish.png") no-repeat;
        background-size: 100% 100%;
        margin-left: 5px;
    }


    img {
        pointer-events: none !important;
    }
    .img-div {
        display: flex;
        align-items: center;
    }
    .img-div-l {
        flex-grow: 1;
        margin-left: auto;
    }

    /* 生成方案 */
    .program-result {
        padding: 0rem 0.3rem;
    }

    .program {
        background-color: #F6F7F9;
        border-radius: 15px;
        border-top-left-radius: 0px;
        margin-bottom: 0.3rem;
    }

    .program-item {
        display: flex;
        padding: 0.5rem 0.5rem 0.1rem 0.5rem;
        width: 100%;
    }

    .program-item-left {
        width: 0.8rem;
        display: flex;
        align-items: center;
    }

    .program-item-left img {
        height: 0.8rem;
    }

    .program-item-right {
        width: calc(100% - 1rem);
        height: 1rem;
    }

    .program-item-right2 {
        width: calc(100% - 1rem);
        height: 1rem;
        display: flex;
    }

    .program-item-right2 img {
        height: 100%;
    }

    .program-item-right2 .loading-tip {
        /* align-items: end; */
        display: flex;
        margin-left: 0.2rem;
        font-size: 16px;
        font-weight: 400;
        flex-direction: column-reverse;
    }

    .right-title {
        font-size: 16px;
        font-weight: 600;
        padding-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        /* 防止文本溢出 */
        text-overflow: ellipsis;
        /* 当文本溢出时显示省略号 */
        line-height: 0.5rem;
    }

    .right-desc {
        font-size: 16px;
        padding-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        /* 防止文本溢出 */
        text-overflow: ellipsis;
        /* 当文本溢出时显示省略号 */
        color: #999;
    }


    .program-btn {
        /* display: flex;
        justify-content: end;
        padding-right: 0.3rem; */
        display: flex;
        position: relative;
        text-align: right;
        padding-right: 0.3rem;
        height: 0.8rem;
        padding-bottom: 0.3rem;
    }

    .program-btn img {
        padding-left: 0.2rem;
        /* padding-bottom: 0.3rem; */
        height: 28px;
    }
  </style>
</head>

<body>
  <div id="app" style="background-image: url('../../../image/Back.png');" v-cloak>
    <multi-btn></multi-btn>
    <choose-dir ref="chooseDirRef" @choose-dir-upload="chooseDirUpload"></choose-dir>
    <div class="is-loading">
      <div class="is-loading">
        <div class="curtain">
          <div class="loadingBgc">
            <div class="loader"></div>
          </div>
        </div>
      </div>
    </div>
    </van-button>
    <div style="margin-bottom: .3rem" class='trainTickets'>
      <div class='trainTicketstitle'>
        <div class="header_tit">
          <van-nav-bar title="转一转" left-arrow>
            <template #left>
              <div class="back_l" @click="home"><img src="../../../image/left.png" alt=""></div>
            </template>
          </van-nav-bar>
        </div>
      </div>
    </div>
    
      <div class="popWrapper">
        <div class="fileImg">
          <div class="upload_img1">
            <div class="upload_img2" v-if="!isformClassActive" @click="chooseUpload">
              <img class="upload-prompt-image" src="../images/upload-yellow.png" />
              <span class="prompt-text">点击此处上传文件</span>
              <span class="prompt-text2">支持20M内的pdf、ofd、word、img文件</span>
            </div>

            <form class="form-user" v-else>
              <div :class="[{'form_wrapper_active': isformClassActive},'form_wrapper']" @click="chooseUpload">
                  <div class="progress-bar" v-if="progressBar">
                    <van-row class="upload-srow" type="flex" justify="space-around">
                      <van-col :class="['upload-bg', bgCss]"></van-col>
                      <van-col class="upload-srow-r">
                        <van-row class="upload-srow-r1">{{fileName}}</van-row>
                        <van-row style="margin-top: 10px;">
                          <van-col span="21">
                            <van-progress color="rgb(235 151 25)" :percentage="progress" style="margin-top: 8px;"/>
                          </van-col>
                          <van-col span="3" v-show="!isfinish">
                            <span style="font-size: smaller;color: #999;margin-left: 5px;" >{{progress}}%</span>
                          </van-col>
                          <van-col span="3" style="padding-top: 5px;" v-show="isfinish">
                            <div class="finishBg" ></div>
                          </van-col>
                        </van-row>
                      </van-col>
                    </van-row>
                  </div>
              </div>
            </form>
          </div>
          <div class="transition">
            <van-row type="flex" justify="space-around">
              <van-col span="6">
                <span style="font-size: smaller;color: #999;">原文件类型</span>
              </van-col>
              <van-col span="4">
              </van-col>
              <van-col span="8">
                <span style="font-size: smaller;color: #999;">目标文件类型</span>
              </van-col>
              <van-col span="6">
              </van-col>
            </van-row>
            <van-row type="flex" justify="space-around">
              <van-col span="6" :class="['typeClass', '自动检测'==fileType? 'def-bg':'uploaded-bg']" >
                <span>{{fileType}}</span>
              </van-col>
              <van-col span="2" offset="1" class="huzhuan">
              </van-col>
              <van-col span="7" offset="1">
                <van-dropdown-menu active-color="rgb(241, 172, 111)">
                  <van-dropdown-item v-model="tansFileType" :options="fileTypeList"/>
                </van-dropdown-menu>
              </van-col>
              <van-col span="6" offset="1" :class="['transBtn', attachmentId ? 'active-btn' : 'unactive-btn']">
                <span @click="startAsyncTransFile">转换</span>
              </van-col>
              <!-- <van-col span="1">
              </van-col> -->
            </van-row>
          </div>

          <div class="search-tip" v-if="fileloading">
            <div class="program">
              <div class="program-item" v-if="uploadFile.id" @click="preview(uploadFile)">
                <div class="program-item-left">
                  <img :src="'../images/' + downFileType + '.png' " alt="" />
                </div>
                <div class="program-item-right">
                  <div class="right-title">{{ uploadFile.name }}</div>
                  <div class="right-desc">{{downFileType.toUpperCase()}}<span style="margin: 0 0.1rem 0 0.1rem;"></span>{{uploadFile.fileSize}}</div>
                </div>
              </div>
              <div class="program-item" v-else>
                <div class="program-item-left">
                  <img :src="'../images/' + downFileType + '.png' " alt="" />
                </div>
                <div class="program-item-right2">
                    <img src="../../../image/loading2.gif" />
                    <div class="loading-tip">文件正在生成中</div>
                </div>
              </div>
              <van-divider :style="{ color: '#999', borderColor: '#999', padding: '0 16px' }"></van-divider>
              <div class="program-btn">
                <div class="img-div-l"></div>
                <div class="img-div">
                  <div v-if="uploadFile.id" class="img-div active-brightness" @click="sendMail(uploadFile)">
                    <img src="../images/send-email.png" />
                  </div>
                  <div v-if="uploadFile.id" class="img-div active-brightness" @click="syncToInner(uploadFile)">
                    <img src="../images/sync.png" />
                  </div>
                  <div v-if="uploadFile.id" class="img-div active-brightness" @click="share(uploadFile)">
                    <img src="../images/share.png" />
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="tip-f" v-if="uploadFile.id" @click="preview(uploadFile)">
              <div>
                <div class="chat-f-l">
                  <img :src="'../images/' + downFileType + '.png' " alt="" />
                </div>
                <div class="chat-f-r">
                  <div class="chat-f-r1">{{ uploadFile.name }}</div>
                  <div class="chat-f-r2">
                    <span class="chat-f-r2-f">
                      {{ uploadFile.type }}
                    </span>
                    <span class="chat-f-r2-s">
                      {{ uploadFile.fileSize }}
                    </span>
                  </div>
                </div>
              </div>
              <van-divider :style="{ color: '#999', borderColor: '#999', padding: '0 16px' }"></van-divider>
              <div>
                <div class="zyzfx" @click="share(uploadFile)"></div>
                <div class="zyzfs" @click="sendMail(uploadFile)"></div>
              </div>
          
            </div> -->
          </div>
        </div>
        
      </div>
    <!-- </van-popup> -->

  </div>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          clickUploadSwitch:true,
          loading: false,
          abortCtrl: null,
          finished: false,
          listData: [],
          num: 0,
          disabled: false,
          showFile: true,
          filesPdfName: '',
          filesPdfSize: '',
          // 设置每个分片的大小（字节）
          CHUNK_SIZE: 5 * 1024 * 1024 + "", // 1MB
          // 分片上传成功索引
          succeed: [],
          // 分片上传失败索引
          failed: [],
          currentRate: 0,
          progress: 0,
          fileName: '',
          progressBar: false,
          disabledInp: false,
          isflageIOX: false,
          retryNum: 0,
          myindex: -1,
          formatList: ['doc', 'docx', 'pdf', 'ofd', 'jpg', 'jpeg', 'png', 'bmp'],
          wordSuffix: ['doc', 'docx'],
          pdfSuffix: ['pdf'],
          ofdSuffix: ['ofd'],
          pptSuffix: ['ppt', 'pptx'],
          excelSuffix: ['xls', 'xlsx'],
          imgSuffix: ['jpg', 'jpeg', 'png', 'bmp'],
          fileType: "自动检测",
          tansFileType: '',
          downFileType: '',
          uploadFile: {
            // "id": "aaa",
            // "name": "测测测.pdf",
            // "type": "pdf",
            // "size": 11111,
            // "fileSize": "123KB"
          },
          fileloading: false,
          isformClassActive:false,
          isfinish:false,
          attachmentId: "",
          baseFileTypeList: {
            PDF: [
              {
                text: '请选择',
                value: ''
              },
              {
                text: 'WORD',
                value: 'WORD'
              },
              {
                text: 'OFD',
                value: 'OFD'
              }             
            ],
            OFD: [
              {
                text: '请选择',
                value: ''
              },
              {
                text: 'WORD',
                value: 'WORD'
              },
              {
                text: 'PDF',
                value: 'PDF'
              }
            ],
            // PPT: [
            //   {
            //     text: '请选择',
            //     value: '' 
            //   },
            //   {
            //     text: 'PDF',
            //     value: 'PDF'                
            //   },
            //   {
            //     text: 'OFD',
            //     value: 'OFD'                
            //   }
            // ],
            WORD: [
              {
                text: '请选择',
                value: ''
              },
              {
                text: 'PDF',
                value: 'PDF'    
              },
              {
                text: 'OFD',
                value: 'OFD'
              }
            ],
            // EXCEL: [
            //   {
            //     text: '请选择',
            //     value: '' 
            //   },
            //   {
            //     text: '折线图',
            //     value: '折线图'                
            //   },
            //   {
            //     text: '柱状图',
            //     value: '柱状图'                
            //   },
            //   {
            //     text: '饼图',
            //     value: '饼图'                
            //   }
            // ],
            PIC: [
              {
                text: '请选择',
                value: '' 
              },
              {
                text: 'PDF',
                value: 'PDF'                
              },
              {
                text: 'WORD',
                value: 'WORD'                
              }
            ],

            //开启异步转换返回的结果
            transFileData: null,
            //转换结果查询定时器
            transFileTimer: null,
          }
        }
      },
      filters: {
        textNum: (value) => {
          if (!value) return "";
          let data = value.split("");
          if (data.length < 15) {
            return value;
          }
          return value.slice(0, 15) + "...";
        },
        fileNametext: (value) => {
          if (!value) return "";
          let data = value.split("");
          if (data.length < 9) {
            return value;
          }
          return value.slice(0, 9) + "...";
        },

      },
      computed: {
        bgCss() {
          return this.fileType.toLowerCase() + '-bg'; 
        },
        fileTypeList() {
          return this.baseFileTypeList[this.fileType] || [
          {
            text: '请选择',
            value: '' 
          },
          {
            text: 'WORD',
            value: 'WORD'
          },
          {
            text: 'OFD',
            value: 'OFD'
          }]
        }
      },
      created() {
        const _this = this
        let jsApiList = []
        $.getScript("../../../js/jweixin-sgccigw-1.0.0.js" /*"js/jweixin-1.0.0.js"*/, function () {
          'use strict';
          wx.ready(function () {
            wx.onHistoryBack(() => {
              _this.home()
              return false
            })
          });
          jsApiList = [
            'previewFile',
            'onHistoryBack',
          ];
          wx.config({
            beta: true, // 调用wx.invoke形式的接口值时，该值必须为true。
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: corpid, 
            timestamp: '1626832073', 
            nonceStr: nonceStr, 
            signature: signature, 
            jsApiList: jsApiList 
          });
        });
      },
      mounted() {
        this.compatibleInput()

        // this.isformClassActive = true
        // this.progressBar = true
        // this.progress = 50
        // this.fileName = 'aaa'
        // this.fileType = 'IMG'
        // this.attachmentId = 1
        // this.fileType = "OFD"
        // this.tansFileType = "PDF"
        // this.fileloading = true
        // this.queryTransResult('005a2ee686814739a274eef9db99f3d8')
      },
      methods: {
        preview(item) {
            myPreviewFile(item)
        },
        //分享
        share(result) {
          shareIgw({
                sceneNo: '107',
                shareType: 1,
                attchId: result.id
          })
        },
        //发送邮件
        sendMail(result) {
            mySendMail('转一转',"answerAttach=" + result.id,10,7)
        },
        //发送到内网统一入口
        syncToInner(result) {
            mySyncToInner('转一转',"answerAttach=" + result.id,10,7)
        },
        //查询文件转换结果
        queryTransResult(id) {
          const userId = sessionStorage.getItem("userId");
            let param = {
              "id": id,
              "timestamp": new Date().getTime() + ""
            };
            let AuthenticationSession = sessionStorage.getItem("Authentication");
            data = JSON.stringify(param)
            let sign = sm3(data);
            $.ajax({
                url: localUrlLink + iscp_port + "/tjAiAssistant/transition/queryTransRes",
                type: "post",
                async: false, //是否同步，false表示同步请求
                dataType: "json",
                data: data,
                headers: {
                    "Content-Type": "application/json;charset=UTF-8",
                    Authentication: AuthenticationSession,
                    sign: sign
                },
                success: (res, txt, xhr) => {
                  if (res.code == 200) {
                    this.uploadFile = res.resultValue
                    if(res.resultValue.id && 1 == res.resultValue.status) {
                      this.uploadFile.fileSize = calcFileSize(this.uploadFile.size)
                      this.getDownFileType(this.uploadFile.type)
                      if(this.transFileTimer) {
                        clearTimeout(this.transFileTimer)
                      }
                    }else if(2 == res.resultValue.status){
                      //失败回调
                      this.fileloading = false
                      this.uploadFile = {}
                      this.downFileType = ''
                      mui.toast("转换失败", { duration: "long", type: "div" });
                      if(this.transFileTimer) {
                        clearTimeout(this.transFileTimer)
                      }
                    }
                  } else {
                    //失败回调
                    this.fileloading = false
                    this.uploadFile = {}
                    this.downFileType = ''
                    mui.toast("转换失败", { duration: "long", type: "div" });
                    if(this.transFileTimer) {
                      clearTimeout(this.transFileTimer)
                    }
                  }
                },
                error: (e) => {
                    //失败回调
                    this.fileloading = false
                    this.uploadFile = {}
                    this.downFileType = ''
                    if(this.transFileTimer) {
                      clearTimeout(this.transFileTimer)
                    }
                    $(".curtain").css("display", "none");
                    mui.toast("转换失败", { duration: "long", type: "div" });
                },
            });
        },
        startAsyncTransFile() {
          if(!this.attachmentId) {
            mui.toast('请先上传文件', {
                duration: 'long',
                type: 'div'
              })
            return
          }
          if(!this.tansFileType) {
            mui.toast('请选择目标文件类型', {
                duration: 'long',
                type: 'div'
              })
            return
          }
          userId = sessionStorage.getItem("userId");
          if (sessionStorage.getItem("iscp_port")) {
            iscp_port = sessionStorage.getItem("iscp_port");
          } else {
            iscp_port = ""
          }
          let param = {
            "userId": userId,
            "fileType": this.fileType,
            "attachmentId": this.attachmentId,
            "tansFileType": this.tansFileType,
            "modelType": "BAIDU", //getLargeModelType(),
            "timestamp": new Date().getTime() + "",
          };
          this.fileloading = true
          this.uploadFile = {}
          this.downFileType = this.tansFileType.toLocaleLowerCase()
          // $(".curtain").css("display", "block");
          console.log("上传参数");
          console.log(param);
          let AuthenticationSession = sessionStorage.getItem("Authentication");
          let data = JSON.stringify(param)
          let sign = sm3(data);
          $.ajax({
                url: localUrlLink + iscp_port + "/tjAiAssistant/transition/startFileTransition",
                type: "post",
                async: false, //是否同步，false表示同步请求
                dataType: "json",
                data: data,
                headers: {
                    "Content-Type": "application/json;charset=UTF-8",
                    Authentication: AuthenticationSession,
                    sign: sign
                },
                success: (res, txt, xhr) => {
                    if (res.code == 200) {
                        console.log(res.resultValue);
                        this.transFileData = res.resultValue

                        this.transFileTimer = setInterval(() => {
                          this.queryTransResult(this.transFileData.id)
                        }, 5000);
                    }
                },
                error: (e) => {
                    //失败回调
                    this.fileloading = false
                    this.uploadFile = {}
                    this.downFileType = ''
                    $(".curtain").css("display", "none");
                    mui.toast("转换失败", { duration: "long", type: "div" });
                },
            });
        },
        transFile() {
          if(!this.attachmentId) {
            mui.toast('请先上传文件', {
                duration: 'long',
                type: 'div'
              })
            return
          }
          if(!this.tansFileType) {
            mui.toast('请选择目标文件类型', {
                duration: 'long',
                type: 'div'
              })
            return
          }
          userId = sessionStorage.getItem("userId");
          if (sessionStorage.getItem("iscp_port")) {
            iscp_port = sessionStorage.getItem("iscp_port");
          } else {
            iscp_port = ""
          }
          let param = {
            "userId": userId,
            "fileType": this.fileType,
            "attachmentId": this.attachmentId,
            "tansFileType": this.tansFileType,
            "modelType": "BAIDU", //getLargeModelType(),
            "timestamp": new Date().getTime() + "",
          };
          this.fileloading = true
          this.uploadFile = {}
          this.downFileType = this.tansFileType.toLocaleLowerCase()
          // $(".curtain").css("display", "block");
          console.log("上传参数");
          console.log(param);
          this.abortCtrl = streamChat(localUrlLink + iscp_port + "/tjAiAssistant/transition/fileTransition", param,
                (res) => {
                    //成功回调
                  $(".curtain").css("display", "none");
                  console.log("转换失败", res)
                  if (res.code == 200) {
                    this.uploadFile = res.resultValue
                    this.uploadFile.fileSize = calcFileSize(this.uploadFile.size)
                    this.getDownFileType(this.uploadFile.type)
                  } else {
                    mui.toast("转换失败", { duration: "long", type: "div" });
                  }
                }, (err) => {
                    //失败回调
                    this.fileloading = false
                    this.uploadFile = {}
                    this.downFileType = ''
                    $(".curtain").css("display", "none");
                    mui.toast("转换失败", { duration: "long", type: "div" });
          });
        },
        clickType() {

        },
        delFile(){
          this.uploadFile = {}
        },
        // 判断安卓还是ios
        compatibleInput() {
          //获取浏览器的userAgent,并转化为小写
          var ua = navigator.userAgent.toLowerCase();
          //判断是否是苹果手机，是则是true
          var isIos = ua.indexOf("iphone") != -1 || ua.indexOf("ipad") != -1;
          if (isIos) {
            this.isflageIOX = true;
          } else {
            this.isflageIOX = false;
          }
        },
        home() {
          $(location).attr("href", "../../Home.html");
        },
        //根据文件后缀，判断文件类型
        getTansFileType(suffix) {
          console.log("文件后缀", suffix)
          console.log("是否图片", this.imgSuffix.includes(suffix.toLocaleLowerCase()))
          this.tansFileType = ''
          if (this.wordSuffix.includes(suffix.toLocaleLowerCase())) {
            this.fileType = 'WORD'
          }else if (this.ofdSuffix.includes(suffix.toLocaleLowerCase())) {
            this.fileType = 'OFD';
          }else if (this.excelSuffix.includes(suffix.toLocaleLowerCase())) {
            this.fileType = 'EXCEL';
          }else if (this.pptSuffix.includes(suffix.toLocaleLowerCase())) {
            this.fileType = 'PPT';
          }else if (this.pdfSuffix.includes(suffix.toLocaleLowerCase())) {
            this.fileType = 'PDF';
          }else if (this.imgSuffix.includes(suffix.toLocaleLowerCase())) {
            this.fileType = 'PIC';
          }  
        },
        getDownFileType(suffix) {
          console.log("文件后缀", suffix)
          console.log("是否图片", this.imgSuffix.includes(suffix.toLocaleLowerCase()))
          if (this.wordSuffix.includes(suffix.toLocaleLowerCase())) {
            this.downFileType = 'word'
          }else if (this.ofdSuffix.includes(suffix.toLocaleLowerCase())) {
            this.downFileType = 'ofd'
          }else if (this.excelSuffix.includes(suffix.toLocaleLowerCase())) {
            this.downFileType = 'excel'
          }else if (this.pptSuffix.includes(suffix.toLocaleLowerCase())) {
            this.downFileType = 'ppt'
          }else if (this.pdfSuffix.includes(suffix.toLocaleLowerCase())) {
            this.downFileType = 'pdf'
          }else if (this.imgSuffix.includes(suffix.toLocaleLowerCase())) {
            this.downFileType = 'img'
          }  
        },
        clearData() {
          this.isfinish = false
          this.isformClassActive = false
          this.progress = 0
          this.progressBar = false
          this.retryNum = 0
          this.fileloading = false
          this.tansFileType = ''
          this.downFileType = ''
          this.attachmentId = ''
          this.fileName = ''
          this.uploadFile = {}
        },
        chooseUpload(type) {
            this.clickUploadSwitch = true
            this.clearData()

            let filePathList = this.$refs.chooseDirRef.filePathList
            if(localStorage.getItem("showBtn") == 'true' && filePathList.length >= 2 && !this.isflageIOX ){
                this.$refs.chooseDirRef.showFilepath = true
            }else {
                this.uploadFunc()
            }
        },
        chooseDirUpload(item) {
            if(item&&(item.id != 0)) {
                let _that = this
                wx.invoke("ext_FileBrowser_AppointDirChooseFile", 
                    {data : {"appointDirPath": item.pathName}}, 
                    (res) => {
                        _that.channelId = "transfer_upload_" + _that.createNonceStr(8) + new Date().getTime() + "";
                        _that.progress = 0
                        wx.invoke("multiWindows_subscribe", {
                            channelId: _that.channelId
                        }, function (res) {
                            console.log("进度条", res)
                            if (res.err_msg == "multiWindows_subscribe:ok") {
                                var progress = Number(res.data.progress) >= 100 ? 99 : Number(res.data.progress)
                                _that.progress = progress > _that.progress ? progress : _that.progress
                            }
                        })

                        console.log('res', res)
                        let recordArr = [{
                            name: res.name,
                            path: res.filePath,
                            fileSize: res.size
                        }]
                        const suffix = recordArr[0].name.split('.').reverse()[0]
                        if (!_that.formatList.includes(suffix.toLocaleLowerCase())) {
                          mui.toast('目前暂不支持该文件类型，请您核对后重新上传', {
                            duration: 'long',
                            type: 'div'
                          })
                          return
                        }
                        if(0 == Number(recordArr[0].fileSize)) {
                          mui.toast('文件不能为空', {
                            duration: 'long',
                            type: 'div'
                          })
                          return
                        }
                        if (Number(recordArr[0].fileSize) / 20000000 > 1) {
                          mui.toast('上传文件大小请控制在20MB内', {
                            duration: 'long',
                            type: 'div'
                          })
                          return
                        }
                        if (checkFileNameForSensitiveWords(recordArr[0].name)) {
                            mui.toast('检测到敏感内容，请确认后再试。', {
                                duration: 'long',
                                type: 'div'
                            })
                            return false
                        }
                        _that.getTansFileType(suffix)
                        _that.fileName = recordArr[0].name
                        _that.checkList(recordArr[0].path, recordArr[0].name, _that.channelId)
                    })
            }else {
                this.uploadFunc()
            }
        },
        uploadFunc() {
          let _that = this
          // _that.clickUploadSwitch = true
          // this.clearData()
          wx.invoke("ext_FileBrowser_StartPreView", {}, function (res) {
            _that.channelId = "transfer_upload_" + _that.createNonceStr(8) + new Date().getTime() + "";
            _that.progress = 0
            wx.invoke("multiWindows_subscribe", {
                channelId: _that.channelId
            }, function (res) {
                console.log("进度条", res)
                if (res.err_msg == "multiWindows_subscribe:ok") {
                    var progress = Number(res.data.progress) >= 100 ? 99 : Number(res.data.progress)
                    _that.progress = progress > _that.progress ? progress : _that.progress
                }
            })
            if (_that.isflageIOX) {
              if(0 == Number(res.size)) {
                mui.toast('文件不能为空', {
                  duration: 'long',
                  type: 'div'
                })
                return
              }
              if (Number(res.size) / 20000000 > 1) {
                mui.toast('上传文件大小请控制在20MB内', {
                  duration: 'long',
                  type: 'div'
                })
                return
              }
              const suffix = res.name.split('.').reverse()[0]
              if (!_that.formatList.includes(suffix.toLocaleLowerCase())) {
                mui.toast('目前暂不支持该文件类型，请您核对后重新上传', {
                  duration: 'long',
                  type: 'div'
                })
                return
              }
              if (checkFileNameForSensitiveWords(res.name)) {
                  mui.toast('检测到敏感内容，请确认后再试。', {
                      duration: 'long',
                      type: 'div'
                  })
                  return false
              }
              console.log("ios上传文件")
              _that.getTansFileType(suffix)
              _that.fileName = res.name
              _that.checkList(res.filePath, res.name, _that.channelId)
            } else {
              let recordArr = JSON.parse(res.result)
              const suffix = recordArr[0].name.split('.').reverse()[0]
              if (!_that.formatList.includes(suffix.toLocaleLowerCase())) {
                mui.toast('目前暂不支持该文件类型，请您核对后重新上传', {
                  duration: 'long',
                  type: 'div'
                })
                return
              }
              if(0 == Number(recordArr[0].fileSize)) {
                mui.toast('文件不能为空', {
                  duration: 'long',
                  type: 'div'
                })
                return
              }
              if (Number(recordArr[0].fileSize) / 20000000 > 1) {
                mui.toast('上传文件大小请控制在20MB内', {
                  duration: 'long',
                  type: 'div'
                })
                return
              }
              if (checkFileNameForSensitiveWords(recordArr[0].name)) {
                  mui.toast('检测到敏感内容，请确认后再试。', {
                      duration: 'long',
                      type: 'div'
                  })
                  return false
              }
              _that.getTansFileType(suffix)
              _that.fileName = recordArr[0].name
              _that.checkList(recordArr[0].path, recordArr[0].name, _that.channelId)
            }
          })
        },
        checkList(path, name, id, fileSize, hash, index) {
            // $(".curtain").css("display", "block");
            let that = this
            that.disabledInp = true
            that.progressBar = true
            that.isformClassActive = true;
            let iscp_port
            if (sessionStorage.getItem("iscp_port")) {
                iscp_port = sessionStorage.getItem("iscp_port");
            } else {
                iscp_port = ""
            }
            let Authentication = sessionStorage.getItem("Authentication");
            const timestamp = new Date().getTime() + ""
            let userId = sessionStorage.getItem("userId");
            let sign = sm3(timestamp + "&" + userId)
            that.fileName = name
            wx.invoke("ext_Net_FragmentUpload", {
                data: {
                    serverAddress: localUrlLink + iscp_port + `/tjAiAssistant/storage/splitUpload2?channelId=${id}`,
                    filePath: path,
                    fragmentSize: that.CHUNK_SIZE,
                    fileName: name,
                    fileHash: hash ? hash : '',
                    upLoadFragmentIndex: index ? index : '',
                    channelId: id,
                    headerData: {
                        sign: sign,
                        userId: userId,
                        type: '',
                        timestamp: timestamp,
                        Authentication: Authentication,
                    }
                },
            }, function (res) {
                if (res.err_msg.endsWith(":ok")) { //成功结果
                    //上传完成
                    // that.recording(id)
                  $(".curtain").css("display", "none");
                  mui.toast("上传成功", {
                    duration: "long",
                    type: "div"
                  });
                  that.progress = 100
                  console.log("上传成功", res)
                  // that.attachmentId = res.resultValue;
                  that.isfinish = true;
                  that.uploadFile = {};
                  that.fileloading = false
                  console.log("this.fileloading", this.fileloading)
                  that.attachmentId = id;
                  that.clickUploadSwitch = false
                  addPendingData(107, id)

                } else if (res.err_msg.endsWith(":cancel")) {
                    $(".curtain").css("display", "none");
                    that.cleanData();
                    return
                } else {
                    $(".curtain").css("display", "none");
                    //上传失败
                    if (that.myindex != Number(res.upLoadFragmentIndex)) {
                        that.myindex = Number(res.upLoadFragmentIndex);
                        that.retryNum = 0;
                    }
                    setTimeout(() => {
                        if (that.retryNum > 4) {
                            // that.retryNum = 0
                            var btnArray = ["取消", "确定"];
                            var i = 0
                            mui.confirm(
                                "是否进行重试？",
                                "上传失败",
                                btnArray,
                                (e) => {
                                    if (i > 0) return
                                    i++
                                    if (e.index == 1) {
                                        that.checkList(path, name, id, fileSize, res.fileHash, res.upLoadFragmentIndex)
                                    } else {
                                        that.isformClassActive = false;
                                        that.cleanData()
                                    }
                                }
                            );
                        } else {
                            that.retryNum++

                            that.checkList(path, name, id, fileSize, res.fileHash, res.upLoadFragmentIndex)
                        }

                    }, (that.retryNum + 1) * 1000)

                }
            })
        },
        cleanData() {
          this.disabledInp = false
          this.progressBar = false
        },
        createNonceStr(len) {
          var e = len ? len : 16;
          var t =
            "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789",
            a = t.length,
            n = "";
          for (i = 0; i < e; i++)
            n += t.charAt(Math.floor(Math.random() * a));
          return n;
        },
      },
    })
  </script>
</body>

</html>